<template>
  <el-dialog
    fullscreen
    :title="title"
    :visible="open"
    append-to-body
    @open="onOpen"
    @close="$emit('close')"
  >
    <div>
      <!-- <div>
        <div>姓名 审核状态</div>
        <div>姓名 审核状态</div>
        <div>姓名 审核状态</div>
      </div> -->
      <!-- <div class="students">
        <div class="student-item" v-for="item in students" :key="item.id">
          <div class="student-name">{{ item.studentName }}</div>
          <div class="student-score" v-if="item.examStatus == 2">
            {{ item.examScore }}分
          </div>
          <el-button
            type="primary"
            plain
            class="student-btn"
            v-else
            @click="onOpenCheckedForm(item.userId)"
            >批阅</el-button
          >
        </div>
      </div> -->
      <div style="margin-bottom:10px;">
        <el-button size="samll" type="primary" plain @click="onDownLoadExamResult"
          >导出成绩单</el-button
        >
        <el-button v-if="status!=3" size="samll" type="danger" style="margin-left:20px;" plain @click="onAllChecked"
          >完成批改</el-button
        >
      </div>
      <el-table :data="students" style="width: 100%">
        <el-table-column prop="studentName" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="panName" label="门店"> </el-table-column>
        <el-table-column prop="finishTime" label="交卷时间"> </el-table-column>
        <el-table-column prop="times" label="考试次数">
          <template slot-scope="scope">
            <div>第{{ scope.row.times }}次</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="批阅状态">
          <template slot-scope="scope">
            <div class="student-score" v-if="scope.row.examStatus == 2">
              {{ scope.row.examScore }}分
            </div>
            <el-button
              type="primary"
              plain
              class="student-btn"
              v-else-if="scope.row.examStatus == 1"
              @click="onOpenCheckedForm(scope.row)"
              >批阅</el-button
            >
            <div v-else>
              未交卷
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <checked
      :sid="studentId"
      :eid="id"
      :scoreId="scoreId"
      :open="openCheckedModal"
      @close="onCheckClose"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="$emit('close')">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import checked from "./checked";
import { getRecordList } from "@/api/cms/exma";
import { batchUpdate, exportExam } from "@/api/cms/record";
// a.match(/<u[^>]*>([\s\S]*?)<\/u>/g)
// a.replace(/<u[^>]*>([\s\S]*?)<\/u>/g,"�")
import { reset, correctionCompleted, replicate } from "@/api/cms/record";

const reg = /<u[^>]*>([\s\S]*?)<\/u>/g;

export default {
  components: { checked },
  filters: {
    filterIndexToABC(index) {
      return String.fromCharCode(65 + index);
    }
  },
  props: {
    id: {
      type: String | Number,
      default: ""
    },
    status: {
      type: String | Number,
      default: ""
    },
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "考试批改"
    }
  },
  data() {
    return {
      openCheckedModal: false,
      students: [],
      studentId: "",
      scoreId: ""
    };
  },
  created() {},
  methods: {
    // 完成全部批改
    onAllChecked() {
      if (this.students.some(x => x.examStatus == 1)) {
        this.$alert("还有考试未批阅,请先点击批阅按钮,完成批阅", "提示");
        return;
      }
      this.$confirm("是否确认设置当前考试全部批改完成?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return correctionCompleted(this.id);
        })
        .then(() => {
          this.onOpen();
          this.msgSuccess("批改完成");
        });
    },
    onDownLoadExamResult() {
      exportExam({
        examId: this.id
      }).then(res => {
        this.download(res.msg);
      });
    },
    onCheckClose() {
      this.openCheckedModal = false;
      this.onOpen();
    },
    onOpen() {
      getRecordList(this.id).then(res => {
        this.students = res.data;
        if (res.data.length == 0) {
          this.$message.warning("没有学生参加考试");
        }
      });
    },
    onOpenCheckedForm(row) {
      this.studentId = row.userId;
      this.scoreId = row.scoreId;
      this.openCheckedModal = true;
    },
    onSubmit() {
      if (this.questions.some(x => !x.title)) {
        this.$message.error("请填写题目");
        return false;
      }

      if (
        this.questions
          .filter(x => x.type === 0)
          .some(x => x.options.filter(y => y.checked && y.label).length < 1)
      ) {
        this.$message.error("请填写选项");
        return false;
      }

      if (
        this.questions
          .filter(x => x.type === 1)
          .some(y => !y.title.match(reg) || y.title.match(reg).length < 1)
      ) {
        this.$message.error("请划填空题答案");
        return false;
      }
      this.questions
        .filter(x => x.type == 0)
        .forEach(x => {
          x.answers = [];
          x.options2 = [];
          x.options.forEach(x => {
            x.options2.push(x.label);
            if (x.checked) {
              x.answers.push(x.label);
            }
          });
        });
      this.questions
        .filter(x => x.type == 1)
        .forEach(x => {
          x.answers = x.title
            .match(reg)
            .map(y => y.replace(/<u[^>]*>([\s\S]*?)<\/u>/g, "$1"));
          x.showTitle = x.title.replace(reg, "�");
        });
      console.log(this.form);
      console.log(this.questions);
    },
    submitForm() {},
    cancel() {}
  }
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    height: calc(100% - 55px - 66px) !important;
  }
}

.exam-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .exam-body {
    flex: 1;
  }
}
.exam-content {
  display: flex;
  align-items: flex-start;
  .exam-content-right {
    width: 200px;
    border-radius: 10px;
    border: 1px solid #ccc;
  }
  .exam-content-left {
    flex: 1;
  }
}
.exam-item {
  border: 1rpx solid #bbb;
  .exam-item-title {
    display: flex;
    align-items: center;
  }
  .exam-item-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .exam-item-select {
    display: flex;
    align-items: center;
    width: 250px;
  }
}

.students {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.student-item {
  width: 200px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-right: 10px;
  height: 78px;
  .student-name {
    flex: 1;
    margin-right: 10px;
    color: #333;
    font-weight: bold;
  }
  .student-score {
    color: #000;
    font-weight: bold;
    font-size: 18px;
  }
  .student-btn {
  }
}
</style>
